<template>
  <div class="land-overview-wrapper">
    <div class="top">
      <div class="top-left">
        <div
          class="top-left-item"
          v-for="(item, index) of topConfig"
          :key="index"
        >
          <div class="top-left-item-icon">
            <img :src="item.icon" />
          </div>
          <div class="top-left-item-content">
            <div class="top-left-item-content-label">
              {{ item.label }}
            </div>
            <div class="top-left-item-content-val">
              <div class="top-left-item-content-val-num">
                {{ topData[item.value] }}
              </div>
              {{ item.unit }}
            </div>
          </div>
        </div>
      </div>
      <div class="top-middle">
        <div class="title">按用地性质</div>
        <div class="top-chart">
          <div class="top-chart-main">
            <echartDiv :options="optionsYDXZ" />
          </div>
          <div class="legend">
            <div
              class="legend-item"
              v-for="(item, index) of legendYDXZ"
              :key="index"
            >
              <div class="legend-item-name">
                <div
                  class="legend-item-name-circle"
                  :style="{
                    backgroundColor: legendColorYDXZ[index]
                  }"
                ></div>
                <div class="legend-item-name-text">
                  {{ item.type }}
                </div>
              </div>
              <div class="legend-item-val">
                <div class="legend-item-val-num">
                  {{ item.total || 0 }}
                </div>
                <div class="legend-item-val-unit">个</div>
                <div class="legend-item-val-num">
                  {{ item.areaTotal || 0 }}
                </div>
                <div class="legend-item-val-unit">亩</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="top-right">
        <div class="title">按供地方式</div>
        <div class="top-chart">
          <div class="top-chart-main">
            <echartDiv :options="optionsGDFS" />
          </div>
          <div class="legend">
            <div
              class="legend-item"
              v-for="(item, index) of legendGDFS"
              :key="index"
            >
              <div class="legend-item-name">
                <div
                  class="legend-item-name-circle"
                  :style="{
                    backgroundColor: legendColorGDFS[index]
                  }"
                ></div>
                <div class="legend-item-name-text">
                  {{ item.type }}
                </div>
              </div>
              <div class="legend-item-val">
                <div class="legend-item-val-num">
                  {{ item.total || 0 }}
                </div>
                <div class="legend-item-val-unit">个</div>
                <div class="legend-item-val-num">
                  {{ item.areaTotal || 0 }}
                </div>
                <div class="legend-item-val-unit">亩</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle">
      <div
        class="middle-part"
        v-for="(part, index) of midConfig"
        :key="index"
      >
        <div
          class="middle-part-item"
          v-for="(item, indexs) of part"
          :key="indexs"
        >
          <div class="middle-part-item-icon">
            <img :src="item.icon" />
          </div>
          <div class="middle-part-item-content">
            <div class="middle-part-item-content-label">
              {{ item.label }}
            </div>
            <div class="middle-part-item-content-val">
              <div class="middle-part-item-content-val-num">
                {{ midData[item.value] }}
              </div>
              {{ item.unit }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-part">
        <div class="title">土地报征各用地面积占比</div>
        <div class="bottom-part-chart">
          <div class="bottom-part-chart-left">
            <echartDiv :options="optionsYDMJ" />
          </div>
          <div class="legend bottom-part-chart-legend">
            <div
              class="legend-item"
              v-for="(item, index) of legendYDMJ"
              :key="index"
            >
              <div class="legend-item-name">
                <div
                  class="legend-item-name-circle"
                  :style="{
                    backgroundColor: legendColorYDMJ[index]
                  }"
                ></div>
                <div class="legend-item-name-text">
                  {{ item.label }}
                </div>
              </div>
              <div class="legend-item-val">
                <div class="legend-item-val-num">
                  {{ item.value || 0 }}
                </div>
                <div class="legend-item-val-unit">公顷</div>
              </div>
            </div>
          </div>
          <div class="bottom-part-chart-right">
            <div class="bottom-part-chart-right-title">
              耕地占农用地
            </div>
            <div class="bottom-part-chart-right-main">
              <echartDiv :options="optionsGD" />
            </div>
            <div class="bottom-part-chart-right-content">
              耕地面积
              <span
                class="bottom-part-chart-right-content-val"
                >{{ gd }}</span
              >公顷
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-part">
        <div class="title">土地报征项目进展情况</div>
        <div class="bottom-part-chart">
          <echartDiv :options="optionsJZQK" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echartDiv from '@/components/echart/index'
import {
  queryLandSupportInfo,
  queryLandDataManageInfo,
  queryStageCount
} from '@/api/wisdomLandOverview'
export default {
  components: {
    echartDiv
  },
  data() {
    return {
      topConfig: [
        {
          label: '供地项目总数',
          value: 'projectTotal',
          unit: '个',
          icon: require('@/assets/img/overview/td-top-icon1.png')
        },
        {
          label: '总用地面积',
          value: 'areaTotalAll',
          unit: '亩',
          icon: require('@/assets/img/overview/td-top-icon2.png')
        }
      ],
      topData: {
        projectTotal: 0,
        areaTotalAll: 0
      },
      midConfig: [
        [
          {
            label: '报征土地项目总数',
            value: 'signUpProjectTotal',
            unit: '个',
            icon: require('@/assets/img/overview/td-mid-icon1.png')
          },
          {
            label: '总用地面积',
            value: 'signUpAreaTotal',
            unit: '公顷',
            icon: require('@/assets/img/overview/td-mid-icon2.png')
          }
        ],
        [
          {
            label: '拆迁项目总数',
            value: 'removeProjectTotal',
            unit: '个',
            icon: require('@/assets/img/overview/td-mid-icon3.png')
          },
          {
            label: '总拆迁面积',
            value: 'removeAreaTotal',
            unit: '亩',
            icon: require('@/assets/img/overview/td-mid-icon4.png')
          }
        ]
      ],
      midData: {
        signUpProjectTotal: 236,
        signUpAreaTotal: 236,
        removeProjectTotal: 236,
        removeAreaTotal: 236
      },

      // 图表
      // 用地性质
      optionsYDXZ: null,
      legendYDXZ: [],
      legendColorYDXZ: ['#80C8FE', '#0190C6', '#EFD0A4'],
      // 供地方式
      optionsGDFS: null,
      legendGDFS: [],
      legendColorGDFS: ['#22CED6', '#FB8585', '#698FEF'],
      // 用地面积
      optionsYDMJ: null,
      legendYDMJ: [],
      legendColorYDMJ: ['#00C6CB', '#E7A377', '#0190C6'],
      // 耕地
      optionsGD: null,
      gd: 0,
      // 进展情况
      optionsJZQK: null
    }
  },
  mounted() {
    this.getStatisticsXM()
    this.getStatisticsMJ()
    this.getStatisticsJZ()
  },
  methods: {
    getStatisticsXM() {
      queryLandSupportInfo().then((res) => {
        if (res.success) {
          this.topData = {
            projectTotal: res.data.projectTotal || 0,
            areaTotalAll: res.data.areaTotalAll || 0
          }
          // 用地性质
          this.legendYDXZ = res.data.usageInfo
          this.optionsYDXZ = this.getChartDataTop(
            res.data.usageInfo,
            this.legendColorYDXZ
          )
          // 供地方式
          this.legendGDFS = res.data.supportInfo
          this.optionsGDFS = this.getChartDataTop(
            res.data.supportInfo,
            this.legendColorGDFS
          )
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getStatisticsMJ() {
      queryLandDataManageInfo().then((res) => {
        if (res.success) {
          this.midData = {
            signUpProjectTotal:
              res.data.signUpProjectTotal || 0,
            signUpAreaTotal: res.data.signUpAreaTotal || 0,
            removeProjectTotal:
              res.data.removeProjectTotal || 0,
            removeAreaTotal: res.data.removeAreaTotal
              ? (res.data.removeAreaTotal * 0.0015).toFixed(
                  2
                )
              : 0
          }
          // 用地面积
          this.legendYDMJ = [
            {
              label: '农用地面积',
              value: res.data.farmArea || 0
            },
            {
              label: '建设用地面积',
              value: res.data.buildArea || 0
            },
            {
              label: '未利用面积',
              value: res.data.uselessArea || 0
            }
          ]
          this.optionsYDMJ = this.getChartDataYDMJ(
            this.legendYDMJ,
            this.legendColorYDMJ
          )
          // 耕地
          this.gd = res.data.ploughArea || 0
          this.optionsGD = this.getChartDataGD(
            (
              (res.data.ploughArea / res.data.farmArea) *
              100
            ).toFixed(0)
          )
          // // 进展情况
          // this.optionsJZQK = this.getChartDataJZQK(
          //   res.data.jzqk
          // )
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getStatisticsJZ() {
      queryStageCount().then((res) => {
        if (res.success) {
          const jzqk = []
          for (let key in res.data) {
            jzqk.push({
              label: key,
              value: res.data[key]
            })
          }
          // 进展情况
          this.optionsJZQK = this.getChartDataJZQK(jzqk)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 用地性质、供地方式
    getChartDataTop(data, color) {
      let option = {
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        legend: {
          show: false
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: ['47%', '55%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            z: 10,
            data: [],
            label: {
              color: '#4C565C',
              fontSize: 14,
              formatter: '{d}%'
            },
            labelLine: {
              show: true
            }
          },
          {
            type: 'pie',
            radius: ['41%', '47%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
              show: false
            },
            data: [],
            labelLine: {
              show: false
            }
          }
        ]
      }
      const seriesData1 = []
      const seriesData2 = []
      for (let index = 0; index < data.length; ++index) {
        const item = data[index]
        seriesData1.push({
          value: item.total,
          name: item.type,
          itemStyle: {
            color: color[index]
          }
        })
        seriesData2.push({
          value: item.total,
          name: item.type,
          itemStyle: {
            color: color[index],
            opacity: 0.4
          }
        })
      }

      option.series[0].data = seriesData1
      option.series[1].data = seriesData2
      return option
    },
    // 进展情况
    getChartDataJZQK(data) {
      let option = {
        grid: {
          top: 50,
          bottom: 50,
          left: 50,
          right: 50
        },
        legend: {
          show: false
        },
        tooltip: {
          show: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#A7ADB5',
            fontSize: 12
          },
          data: []
        },
        yAxis: {
          name: '单位（件）',
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#A7ADB5',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#497FA333'
            }
          },
          nameTextStyle: {
            color: '#A7ADB5',
            fontSize: 12
          }
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: '22',
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: '#419EDC'
                },
                {
                  offset: 1,
                  color: '#5AB9F8'
                }
              ]
            ),
            label: {
              show: true,
              position: 'top',
              textStyle: {
                fontSize: '12px',
                color: '#A7ADB5'
              },
              formatter: '{c}'
            }
          }
        ]
      }

      const xAxisData = []
      const seriesData = []
      data.forEach((item) => {
        xAxisData.push(item.label)
        seriesData.push(item.value)
      })

      option.xAxis.data = xAxisData
      option.series[0].data = seriesData
      return option
    },
    // 用地面积
    getChartDataYDMJ(data, color) {
      let option = {
        color: color,
        grid: {
          top: 50,
          bottom: 50,
          left: 50,
          right: 50
        },
        legend: {
          show: false
        },
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'pie',
            radius: ['15%', '80%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            roseType: 'area',
            itemStyle: {
              borderWidth: 5,
              borderType: 'solid',
              borderColor: '#fff'
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: []
          }
        ]
      }

      const seriesData = []
      data.forEach((item) => {
        seriesData.push({
          name: item.label,
          value: item.value
        })
      })
      option.series[0].data = seriesData

      return option
    },
    // 耕地
    getChartDataGD(data) {
      let option = {
        title: {
          text: data + '%',
          textStyle: {
            color: '#000000',
            fontSize: 18
          },
          left: 'center',
          top: 'center'
        },
        tooltip: {
          formatter: '{c}%'
        },
        angleAxis: {
          max: 100,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        polar: {
          center: ['50%', '50%'],
          radius: ['68%', '80%']
        },
        series: [
          {
            type: 'bar',
            data: [data],
            showBackground: true,
            backgroundStyle: {
              color: '#0190C6'
            },
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 30,
            itemStyle: {
              color: '#9FE0F9'
            }
          }
        ]
      }

      return option
    }
  }
}
</script>

<style lang="scss">
.land-overview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 16px;
  .title {
    width: 100%;
    height: 54px;
    color: #4c565c;
    font-size: 16px;
    font-weight: 500;
    position: relative;
    box-sizing: border-box;
    padding: 0 0 0 35px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    &::before {
      content: '';
      width: 4px;
      height: 16px;
      background: linear-gradient(180deg, #40ebff, #bcf8ff);
      position: absolute;
      top: 19px;
      left: 24px;
    }
  }
  .legend {
    width: 220px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    &-item {
      width: 100%;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      &-name {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 13px;
        &-circle {
          width: 8px;
          height: 8px;
          border-radius: 4px;
          margin-right: 8px;
        }
        &-text {
          font-size: 14px;
          line-height: 14px;
          font-weight: 400;
          color: #3c3c3c;
        }
      }
      &-val {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        &-num {
          font-size: 16px;
          line-height: 16px;
          font-family: DIN;
          font-weight: 500;
          color: #000000;
          margin-left: 18px;
        }
        &-unit {
          font-size: 14px;
          line-height: 14px;
          font-weight: 500;
          color: #4c565c;
          margin-left: 4px;
        }
      }
    }
  }
  .top {
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    height: 39.4%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    &-left {
      width: 30%;
      height: 100%;
      box-sizing: border-box;
      border-right: 1px solid #f1f1f1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &-item {
        width: 401px;
        height: 128px;
        background: url('~@/assets/img/overview/td-top-bg.png')
          no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &:first-child {
          margin-bottom: 16px;
          .top-left-item-icon {
            background: url('~@/assets/img/overview/td-top-bg1.png')
              no-repeat;
            background-size: 100% 100%;
          }
        }
        &-icon {
          width: 136px;
          height: 108px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url('~@/assets/img/overview/td-top-bg2.png')
            no-repeat;
          background-size: 100% 100%;
          img {
            width: 60px;
            height: 60px;
          }
        }
        &-content {
          flex: 1;
          height: 108px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          box-sizing: border-box;
          padding-left: 30px;
          &-label {
            font-size: 14px;
            line-height: 14px;
            font-weight: 500;
            color: #4c565c;
            margin-bottom: 22px;
          }
          &-val {
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            font-size: 14px;
            line-height: 14px;
            font-weight: 500;
            color: #4c565c;
            &-num {
              font-size: 18px;
              line-height: 18px;
              font-family: DIN;
              font-weight: bold;
              color: #000000;
              margin: 0 5px -2px 0;
            }
          }
        }
      }
    }
    &-middle {
      width: 35%;
      height: 100%;
      box-sizing: border-box;
      border-right: 1px solid #f1f1f1;
    }
    &-right {
      width: 35%;
      height: 100%;
      box-sizing: border-box;
    }
    &-chart {
      width: 100%;
      height: calc(100% - 54px);
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      &-main {
        width: calc(100% - 220px);
        height: 100%;
      }
    }
  }
  .middle {
    width: 100%;
    height: 18.4%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 18px 0;
    &-part {
      width: calc(50% - 9px);
      height: 100%;
      background-color: #fff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
      padding: 9px 0;
      &-item {
        width: 343px;
        height: 120px;
        background: url('~@/assets/img/overview/td-mid-bg.png')
          no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &-icon {
          width: 70px;
          height: 70px;
          border-radius: 50%;
          background-color: #497fa3;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 28px 0 48px;
          img {
            width: 34px;
            height: 34px;
          }
        }
        &-content {
          height: 70px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-around;
          &-label {
            font-size: 14px;
            line-height: 14px;
            font-weight: 500;
            color: #4c565c;
          }
          &-val {
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            font-size: 14px;
            line-height: 14px;
            font-weight: 500;
            color: #4c565c;
            &-num {
              font-size: 18px;
              line-height: 18px;
              font-family: DIN;
              font-weight: bold;
              color: #000000;
              margin: 0 5px -2px 0;
            }
          }
        }
      }
      &:last-child {
        .middle-part-item-icon {
          background-color: #54b3f1;
        }
      }
    }
  }
  .bottom {
    width: 100%;
    height: 42.2%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    &-part {
      width: calc(50% - 9px);
      height: 100%;
      background-color: #fff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 2px;
      box-sizing: border-box;
      &-chart {
        width: 100%;
        height: calc(100% - 50px);
        display: flex;
        &-left {
          width: 300px;
          height: 100%;
        }
        &-right {
          width: calc(100% - 450px);
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &-title {
            font-size: 14px;
            line-height: 14px;
            font-weight: 400;
            color: #3c3c3c;
          }
          &-main {
            width: 100%;
            height: 180px;
          }
          &-content {
            font-size: 14px;
            line-height: 14px;
            font-weight: 400;
            color: #3c3c3c;
            &-val {
              font-size: 18px;
              line-height: 18px;
              font-family: DIN;
              font-weight: 500;
              color: #000000;
              margin: 0 8px 0 10px;
            }
          }
        }
        &-legend {
          width: 150px;
        }
      }
    }
  }
}
</style>
